<template>
  <view class="dz-list flexc">
    <view class="search">
      <u-search
        borderColor="#F6F6F6"
        v-model="keyword"
        height="36"
        bgColor="#F6F6F6"
        :showAction="false"
        searchIconColor="#959595"
        :searchIconSize="20"
        placeholderColor="#959595"
        placeholder="搜索您需要的服务"
        @search="handleSearch"></u-search>
    </view>
    <view class="flex1 over" style="background: #f6f6f6">
      <scroll-view scroll-y="true" style="height: 100%">
        <view class="wrap">
          <view class="box flex" v-for="item in 10">
            <image src="/static/demo.jpg" mode="aspectFit"></image>
            <view class="flex1">
              <view class="box-t ellipsis-2">111111111</view>
              <view class="box-c flex">
                <image src="/static/avatar.png" mode="aspectFit"></image>
                <view class="box-c-t">代用名</view>
                <view class="box-c-b">美术老师</view>
              </view>
              <view class="flex-between">
                <view class="price">
                  <text>￥</text>
                  190.00
                </view>
                <view class="flex dx">
                  <image src="@/static/image/x.png" mode="aspectFit"></image>
                  <view class="">111</view>
                </view>
              </view>
            </view>
          </view>
          <u-loadmore :status="product_loadmore_status" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      product_loadmore_status: "loadmore", //loadmore  / loading / nomore
    };
  },
  methods: {
    //搜索
    handleSearch() {},
  },
};
</script>

<style lang="scss" scoped>
.dz-list {
  width: 100%;
  height: 100%;
  background: #fff;
  .search {
    padding: 8upx 32upx;
  }
  .wrap {
    height: 100%;
    box-sizing: border-box;
    padding: 24upx 32upx;
    background: #f6f6f6;
    .box {
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      margin-bottom: 24upx;
      padding: 24upx;
      & > image {
        width: 168rpx;
        height: 168rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-right: 24upx;
      }
      &-t {
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        margin-bottom: 20upx;
      }
      &-c {
        margin-bottom: 24upx;
        & > image {
          width: 24rpx;
          height: 24rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
        &-t {
          font-weight: bold;
          font-size: 20rpx;
          color: #000000;
          margin: 0 16upx;
        }
        &-b {
          width: 80rpx;
          height: 24rpx;
          background: #f49c0d;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          text-align: center;
          line-height: 24upx;
          font-size: 16rpx;
          color: #ffffff;
        }
      }
      .price {
        font-weight: bold;
        font-size: 24rpx;
        color: #e23410;
        & > text {
          font-size: 16rpx;
          color: #e23410;
          font-weight: 400;
        }
      }
      .dx {
        font-size: 20rpx;
        color: #000000;
        & > image {
          width: 24rpx;
          height: 23rpx;
          margin-right: 8upx;
        }
      }
    }
  }
}
</style>
